<template> 
<!-- 关联人 -->
	 <view class="coreshop-flex coreshop-flex-direction">
	    <view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between c-m-t-10">
			<view class="coreshop-flex c-m-l-10 c-m-r-10">
				<u-icon name="arrow-left" size="20" @click="hideModel" :bold="true"></u-icon>
			</view>
			<view class="coreshop-flex-sub">
				<u-search :clearabled="false"
					v-model="keyword"
					@custom="doSearch"
					placeholder="请输入姓名"   
					height="38" 
					:actionStyle="{width:'130rpx',height:'80rpx',background:'#2A8FFC','border-radius':'25px','margin':'0 20rpx','font-size':'28rpx',color:'#fff','line-height':'80rpx','text-align':'center'}"
					:showAction="true" actionText="搜索" :animation="false"></u-search>
			</view>
		</view>
	 
		<scroll-view class="scroll-box" scroll-y>
			<view class="c-m-t-20" style="border-top: 1px solid #E0E0E0;" v-if="List.length>0">
				<u-checkbox-group v-model="selectList" placement="column" @change="selectCorrelation">
					<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between" v-for="(item, index) in List" :key="index" style="border-bottom: 1px solid #F1F1F5;margin: 20rpx 20rpx;">
						<view class="c-m-b-10"><u--text :text="item.name"></u--text></view>	
						<view> 
							<u-checkbox activeColor="blue" :name="item.id"></u-checkbox> 
						</view>
					</view>
				</u-checkbox-group>
				<!-- 更多 -->
				<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
			</view>
			<view v-else class="over-hidden">
				<u-loadmore status="nomore" margin-top="40" margin-bottom="40" :load-text="{nomore:'暂无数据'}"/>
			</view>
		</scroll-view>
		
		<view><u-button type="primary" text="确定" @click="selectSure"></u-button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectList:[],//默认选中的人
				
				// teamworkIdx:'',//协同的事项
				
				// Idx:'',//操作的第几个事项
				// itemType:'',//计划还是协同
				// itemList:[],//操作的数据
				
				
				tabList:[{name:'全部'},{name:'按照部门'}],
				tabCurrent:0,
				
				depTabCurrent:null,
				showDepTabs:false,
				
				keyword:'',
				List: [],//格式化数据
				status:'loading',
				
				// planItem:{}
				
				// arr:[]
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				iconType: 'flower',
				loadText: {
				    loadmore: '轻轻上拉',
				    loading: '努力加载中',
				    nomore: '实在没有了'
				},
				currentPage: 1,
				key: '',
				searchData: {
					id:null,
				    where: {},
				    limit: 10,
				    page: 1 
				},
			}
		},
		props:{
			// item:{
			// 	type:Object,
			// 	default:{}
			// },
			list:{
				type:Array,
				default:[]
			}
		},
		created() {
			// this.Idx = e.idx;
			// this.itemType = e.t;
			// let list = [];
			// if(e.t=='teamwork'){
			// 	list = this.$store.state.teamworkList;
			// }else{
			// 	list = this.$store.state.planList;
			// }
			// this.itemList = list;
			// if(list.length>0){
			// 	this.selectList = list[e.idx].GLR || [];
			// }
			
			
			// let info = this.item || {};
			// this.selectList = info.GLR || [];
			// // info.GLR = info.GLR || [];
			// this.planItem = info;
			// console.log(this.planItem)
			  
			this.list.forEach((item)=>{
				this.selectList.push(+item.id);
			})
			console.log('??????????',this.selectList)
			this.GetGLR();

			// if(this.$store.state.departmentList.length==0){
			// 	this.$store.dispatch('getListFromAPI',{vm:this,name:'departmentList'});
			// }
			
		},
		mounted() {
			// console.log(this.$refs.tabs)
			// setTimeout(()=>{
			// 	this.$refs.tabs.init();
			// 	console.log(this.$refs.tabs.offsetWidth)
			// },1000)
			
		},
		computed: {
			depTabList(){
				return this.$store.state.departmentList
			}
		},
		methods:{
			doSearch(){
				this.currentPage=1;
				this.List=[];
				this.GetGLR();
			},
			GetGLR(){ //获取关联人员
				 let self=this;
				 this.loadStatus = 'loading';
				 
				this.$u.api.getGLRY(this.conditions()).then(res => {
					// uni.hideLoading();
					// const datas = res.data.model || [];
					// if(datas.length==0){
					// 	this.status = 'nomore';
					// } 
					this.List = this._normalizeSinger(res.data);
					
					if (res.code > this.List.length) {
					    self.currentPage++
					    self.loadStatus = 'loadmore'
					} else {
					    self.loadStatus = 'nomore'
					}
				}).catch(() => {})
			},
			// 统一返回筛选条件 查询条件 分页
			conditions() {
				var where = {};
				if(this.keyword != ''){
					where = {
					    searchName: this.keyword
					};
				}
				this.searchData.where = where; 
				this.searchData.page = this.currentPage;
				
			    let data = this.searchData;
			    var newData = this.$u.deepClone(data);
			    if (data.where) {
			        newData.where = JSON.stringify(data.where);
			    } 
			    return newData;
			},
			tabChange(index){//tab切换
				this.tabCurrent = index;
				this.depTabCurrent = null;
				this.keyword = '';
				
				if(index=='1'){
					this.showDepTabs = true;
				}else{
					this.showDepTabs = false;
				}
				this.GetGLR();
			},
			depTabChange(index){ //部门tab选择
				this.depTabCurrent = index;
				this.$refs.subDropdown.close();
				this.GetGLR();
			},
			selectCorrelation(e){ //选择
				// let datas = this.selectList;
				// const list = e.name.split('|$|') || [];
				// const info = {
				// 	id:list[0],
				// 	name:list[1],
				// }
				// if(e.value){
				// 	datas.push(info)
				// } else{
				// 	datas.forEach((item,index)=>{
				// 		if(item.id == info.id){
				// 			datas.splice(index,1);
				// 		}
				// 	})
				// }
				 this.selectList=e;
				console.log(this.selectList)
			},
			selectNeed(e){
				let arr = this.selectList || [];
				arr.forEach((item,index)=>{
					if(item.id == e.name){
						item.type = e.value ? '1' : '0'
					}
				})
				this.selectList = arr;
			},
			selectSure(){
				// let selectList = this.selectList || [];
				// selectList.forEach(item=>{
				// 	if(!item.type && item.type != 0){
				// 		item.type = '1'
				// 	}
				// })
					let selectList =this.List.filter(c=>this.selectList.includes(c.id));
				this.$emit('update:list', selectList);
				this.$emit('update:showModel', false);
			},
			hideModel(){
				this.$emit('update:showModel',false)
			},
			_normalizeSinger(list){
				// let map = {};
				// list.forEach((item, index) => {
				// 	const key = item.index;
				// 	if (!map[key]) {
				// 		map[key] = {
				// 			title: key,
				// 			items: []
				// 		}
				// 	}
				// 	const hasSelect = this.selectList.find(d=>{
				// 		return d.id == item.KHJBXX.ID
				// 	})
					
				// 	map[key].items.push({
				// 		name: item.KHJBXX.YGXM,
				// 		id: item.KHJBXX.ID,
				// 		checked: hasSelect ? true : false,
				// 		needed: hasSelect && hasSelect.type == '0' ? false : true
				// 	})
				// })
				// let ret = [],hot = [];
				// for (let key in map) {
				//   let val = map[key];
				//   if (val.title.match(/[a-zA-Z0-9]/)) {
				// 	ret.push(val);
				//   }
				// }
				// ret.sort((a, b) => {
				//   return a.title.charCodeAt(0) - b.title.charCodeAt(0)
				// })
				// return hot.concat(ret)
				
				let ret = []
				list.forEach((item, index) => { 
					ret.push({
						id:item.id,
						name: item.name 
					})
				});
				return ret;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	 
	
</style>